<template>
  <div
    style="background-color: white;box-sizing: border-box;padding: 15px 20px;width: 100%;height: 100%;box-shadow: 0 0 4px 0 lightgray;border: 1px solid #DCDFE6;">
    <el-row style="margin-bottom: 15px" type="flex" align="middle">
      <el-col :span="3">
        <b style="font-size: 20px">任务管理</b>
      </el-col>
      <el-col :span="6" :offset="15">
        <el-row type="flex" align="middle">
          <el-col :span="9">
            <el-input
              placeholder="请输入任务名称"
              prefix-icon="el-icon-search"
              size="medium" @keyup.enter.native=""
              v-model="searchName">
            </el-input>
          </el-col>
          <el-col :span="15">
            <div style="float: right">
              <el-button type="success" icon="el-icon-plus" size="medium" @click="addDialogVisible = true;" round>
                添加任务
              </el-button>
              <el-popconfirm title="确定删除吗？" @confirm="">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="medium" round
                           :disabled="this.selectionList.length===0">
                  批量删除
                </el-button>
              </el-popconfirm>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-table :data="tasks" border tooltip-effect="dark" stripe max-height="638">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="name" label="任务名称" width="120">
      </el-table-column>
      <el-table-column align="center" label="工人">
        <template slot-scope="scope">
          <el-tag style="margin: 5px 5px 5px 5px;"
                  v-for="job in scope.row.workers" :disable-transitions="true"
                  :key="job" type="warning"
                  size="small">
            {{ job }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="岗位">
        <template slot-scope="scope">
          <el-tag style="margin: 5px 5px 5px 5px;"
                  v-for="task in scope.row.jobs" :disable-transitions="true"
                  :key="task" type="warning"
                  size="small">
            {{ task }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务时间" width="380">
        <template slot-scope="scope">
          <el-date-picker
            align="center" :clearable="false"
            :value="scope.row.date"
            type="datetimerange" value-format="timestamp" readonly
            start-placeholder="开始日期" range-separator="至"
            end-placeholder="截止日期"
            style="width: 100%;">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <el-button plain size="mini"
                     type="primary" icon="el-icon-edit"
                     @click="clickEditButton(scope.$index)">编辑
          </el-button>
          <el-button plain size="mini"
                     type="danger" icon="el-icon-delete"
                     @click="">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加任务" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newTask" :rules="rules" ref="addTaskForm">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="newTask.name"></el-input>
        </el-form-item>
        <el-form-item label="任务时间" prop="date">
          <el-date-picker
            align="center"
            v-model="newTask.date" format="yyyy年MM月dd日 HH:mm:ss"
            type="datetimerange" value-format="timestamp"
            start-placeholder="开始日期" range-separator="至"
            end-placeholder="截止日期"
            style="width: 100%;"
            :default-time="['12:00:00','12:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="newTask.jobs" multiple filterable placeholder="请选择岗位">
            <el-option
              v-for="item in allJobs"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工人">
          <el-select v-model="newTask.workers" multiple filterable placeholder="请选择工人">
            <el-option
              v-for="item in allWorkers"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTask('addTaskForm')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑任务信息" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="tempTask" :rules="rules" ref="editTaskForm">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="tempTask.name"></el-input>
        </el-form-item>
        <el-form-item label="任务时间" prop="date">
          <el-date-picker
            align="center"
            v-model="tempTask.date" format="yyyy年MM月dd日 HH:mm:ss"
            type="datetimerange" value-format="timestamp"
            start-placeholder="开始日期" range-separator="至"
            end-placeholder="截止日期"
            style="width: 100%;"
            :default-time="['12:00:00','12:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="tempTask.jobs" multiple filterable placeholder="请选择岗位">
            <el-option
              v-for="item in allJobs"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工人">
          <el-select v-model="tempTask.workers" multiple filterable placeholder="请选择工人">
            <el-option
              v-for="item in allWorkers"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editTask('editTaskForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    clickEditButton(index) {
      this.editDialogVisible = true;
      this.currentIndex = index;
      //中间变量，以便点击提交的时候才会更新当前的数据
      this.tempTask = JSON.parse(JSON.stringify(this.tasks[index]));
    },
    addTask(formName){
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '添加成功！',
              type: 'success'
            });
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.tasks.push(this.newTask)
            this.addDialogVisible = false
            this.newTask = {
              name: '',
              tasks: [],
              jobs: [],
              date: []
            }
          } else {
            return false;
          }
        });
    },
    editTask(formName) {
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success'
            });
            this.editDialogVisible = false;
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.tasks.splice(this.currentIndex, 1, this.tempTask)
          } else {
            return false;
          }
        });
    },
  },
  data() {
    return {
      editDialogVisible: false,
      addDialogVisible: false,
      selectionList: [],
      searchName: '',
      currentIndex: 0,
      allJobs: ['岗位1', '岗位2', '岗位3', '岗位4', '岗位5', '岗位6'],
      allWorkers: ['工人1', '工人2', '工人3', '工人4', '工人5', '工人6', '工人7', '工人8', '工人9', '工人10'],
      newTask: {
        name: '',
        workers: [],
        jobs: [],
        date: []
      },
      tempTask: {
        name: '',
        workers: [],
        jobs: [],
        date: []
      },
      rules: {
        name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ],
        date: [
          {required: true, message: '请选择开始和截止时间', trigger: 'blur'},
        ]
      },
      tasks: [
        {
          name: '任务1',
          workers: ['工人2', '工人4', '工人5'],
          jobs: ['岗位1', '岗位3', '岗位4'],
          date: [1623858200000, 1623858500000]
        },
        {
          name: '任务2',
          workers: ['工人1', '工人2', '工人3'],
          jobs: ['岗位1', '岗位2'],
          date: [1609948800000, 1609958800000]
        },
        {
          name: '任务3',
          workers: ['工人1', '工人2', '工人3'],
          jobs: ['岗位1', '岗位2'],
          date: [1618416000000, 1619416000000]
        },
        {
          name: '任务4',
          workers: ['工人1', '工人2', '工人3'],
          jobs: ['岗位1', '岗位2'],
          date: [1620000000000, 1620000500000]
        },
        {
          name: '任务5',
          workers: ['工人1', '工人2', '工人3'],
          jobs: ['岗位1', '岗位2'],
          date: [1613858200000, 1613958200000]
        },
      ]
    }
  }
}
</script>

<style scoped>

</style>
